<link rel="stylesheet" href="<?php echo Url::base(); ?>css/qiandao_style.css">

<div class="qiandao-warp">
    <div class="qiandap-box">
        <div class="qiandao-banner">
        </div>
        <div class="qiandao-con clear">
            <div class="qiandao-left">
                <div class="qiandao-left-top clear">
                    <div class="current-date"></div>
                    <div class="qiandao-history qiandao-tran qiandao-radius" id="js-qiandao-history">我的签到</div>
                </div>
                <div class="qiandao-main" id="js-qiandao-main">
                    <ul class="qiandao-list" id="js-qiandao-list">
                    </ul>
                </div>
            </div>
            <div class="qiandao-right">
                <div class="qiandao-top">
                    <div class="just-qiandao qiandao-sprits" id="js-just-qiandao">
                    </div>
                    <p class="qiandao-notic">今日已领<span>20</span>分，请明日继续签到</p>
                </div>
                <div class="qiandao-bottom">
                    <div class="qiandao-rule-list">
                        <h4>签到规则</h4>
                        <p>每天签到可以获得积分</p>

                    </div>
                </div>
            </div>
        </div>
    </div><!-- 我的签到 layer end -->
    <!-- 签到 layer start -->
    <div class="qiandao-layer qiandao-active">
        <div class="qiandao-layer-con qiandao-radius">
            <a href="javascript:;" class="close-qiandao-layer qiandao-sprits"></a>
            <div class="yiqiandao clear">
                <div class="yiqiandao-icon qiandao-sprits"></div>签到成功
            </div>
            <div class="qiandao-jiangli qiandao-sprits">
                <span class="qiandao-jiangli-num">20<em>积分</em></span>
            </div>
            <a href="#" class="qiandao-share qiandao-tran">分享获取双倍收益</a>
        </div>
        <div class="qiandao-layer-bg"></div>
    </div>
    <!-- 签到 layer end -->
    <script src="<?php echo Url::base(); ?>js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        function sign(){
            var size = <?php echo count($list);?>;
            $("#count").html(size+1)
            $.ajax({

                type: 'get',

                url:  '<?php echo Url::base(); ?>index.php/user/sign',

                data: null,

                success: function(data){

                },

                dataType: 'json'

            });
        }
        $(function() {
            var signFun = function() {

                var dateArray = <?php echo $list;?> // 假设已经签到的

                var $dateBox = $("#js-qiandao-list"),
                    $currentDate = $(".current-date"),
                    $qiandaoBnt = $("#js-just-qiandao"),
                    _html = '',
                    _handle = true,
                    myDate = new Date();
                $currentDate.text(myDate.getFullYear() + '年' + parseInt(myDate.getMonth() + 1) + '月' + myDate.getDate() + '日');

                var monthFirst = new Date(myDate.getFullYear(), parseInt(myDate.getMonth()), 1).getDay();

                var d = new Date(myDate.getFullYear(), parseInt(myDate.getMonth() + 1), 0);
                var totalDay = d.getDate(); //获取当前月的天数

                for (var i = 0; i < 42; i++) {
                    _html += ' <li><div class="qiandao-icon"></div></li>'
                }
                $dateBox.html(_html) //生成日历网格

                var $dateLi = $dateBox.find("li");
                for (var i = 0; i < totalDay; i++) {
                    $dateLi.eq(i + monthFirst).addClass("date" + parseInt(i + 1));
                    for (var j = 0; j < dateArray.length; j++) {
                        if (i == dateArray[j]) {
                            $dateLi.eq(i-1 + monthFirst).addClass("qiandao");
                        }
                    }
                } //生成当月的日历且含已签到

                $(".date" + myDate.getDate()).addClass('able-qiandao');

                $dateBox.on("click", "li", function(key,value) {
                    sign()
                    if ($(this).hasClass('able-qiandao') && _handle) {
                        $(this).addClass('qiandao');
                        qiandaoFun();
                    }
                }) //签到

                $qiandaoBnt.on("click", function(key ,value) {

                    if (_handle) {

                        qiandaoFun();
                    }
                }); //签到

                function qiandaoFun() {
                    $qiandaoBnt.addClass('actived');

                    openLayer("qiandao-active", qianDao);
                    _handle = false;
                }

                function qianDao() {
                    $(".date" + myDate.getDate()).addClass('qiandao');
                }
            }();

            function openLayer(a, Fun) {
                $('.' + a).fadeIn(Fun)
            } //打开弹窗

            var closeLayer = function() {
                $("body").on("click", ".close-qiandao-layer", function() {
                    $(this).parents(".qiandao-layer").fadeOut()
                })
            }() //关闭弹窗

            $("#js-qiandao-history").on("click", function() {
              
                openLayer("qiandao-history-layer", myFun);

                function myFun(data) {
                    console.log(data)
                } //打开弹窗返回函数
                sign()
            })

        })

    </script>

</div>

